<!DOCTYPE html><html lang="zh-Hans"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><meta name="x5-fullscreen" content="true"><meta name="full-screen" content="yes"><meta name="theme-color" content="#317EFB"><meta content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=0" name="viewport"><meta name="description" content="基本安装使用1npm i webpack webpack-cli -D  1npx webpack   npx 命令会将nodemodules文件夹里的.bin 加入环境变量 以便可以使用webpack应用程序   打包成功了 基本配置  配置文件一定在根目录 名字是固定的  五步写   entry一般都写相对路径 输出写绝对路径 开发模式 一般是要先开发模式开发一套 在生产模式一套 处理样式资源"><meta property="og:type" content="article"><meta property="og:title" content="webpack基本使用"><meta property="og:url" content="https://buqingdege.gitee.io/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/webpack%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/index.html"><meta property="og:site_name" content="Hexo"><meta property="og:description" content="基本安装使用1npm i webpack webpack-cli -D  1npx webpack   npx 命令会将nodemodules文件夹里的.bin 加入环境变量 以便可以使用webpack应用程序   打包成功了 基本配置  配置文件一定在根目录 名字是固定的  五步写   entry一般都写相对路径 输出写绝对路径 开发模式 一般是要先开发模式开发一套 在生产模式一套 处理样式资源"><meta property="og:locale"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="og:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><meta property="article:published_time" content="2023-07-01T12:41:12.421Z"><meta property="article:modified_time" content="2023-10-08T16:36:43.111Z"><meta property="article:author" content="buqingdege"><meta property="article:tag" content="webpack"><meta name="twitter:card" content="summary"><meta name="twitter:image" content="https://buqingdege.gitee.io/xujianhu/img/404.jpg"><title>webpack基本使用</title><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="16x16"><link href="/xujianhu/img/favicon.svg?v=2.1.2" rel="icon" type="image/png" sizes="32x32"><link rel="stylesheet" href="/xujianhu/css/plugins/bootstrap.row.css"><link rel="stylesheet" href="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.css"><link rel="stylesheet" href="/xujianhu/css/plugins/font-awesome.min.css"><script>window.ASYNC_CONFIG={hostname:"buqingdege.gitee.io",author:"buqingdege",root:"/xujianhu/",typed_text:["buqingdege"],theme_version:"2.1.2",theme:{switch:!0,default:"style-light"},favicon:{logo:"/img/favicon.svg",icon16:"/img/favicon.svg",icon32:"/img/favicon.svg",appleTouchIcon:null,webmanifest:null,visibilitychange:!1,hidden:"/failure.ico",showText:"(/≧▽≦/)咦！又好了！",hideText:"(●—●)喔哟，崩溃啦！"},i18n:{placeholder:"搜索文章...",empty:"找不到您查询的内容: ${query}",hits:"找到 ${hits} 条结果",hits_time:"找到 ${hits} 条结果（用时 ${time} 毫秒）",author:"本文作者：",copyright_link:"本文链接：",copyright_license_title:"版权声明：",copyright_license_content:"本博客所有文章除特别声明外，均默认采用 undefined 许可协议。",copy_success:"复制成功",copy_failure:"复制失败",open_read_mode:"进入阅读模式",exit_read_mode:"退出阅读模式",notice_outdate_message:"距离上次更新已经 undefined 天了, 文章内容可能已经过时。",just:"刚刚",min:"分钟前",hour:"小时前",day:"天前",month:"个月前"},swup:!1,plugin:{flickr_justified_gallery:"https://unpkg.com/flickr-justified-gallery@latest/dist/fjGallery.min.js"},icons:{sun:"far fa-sun",moon:"far fa-moon",play:"fas fa-play",email:"far fa-envelope",next:"fas fa-arrow-right",calendar:"far fa-calendar-alt",clock:"far fa-clock",user:"far fa-user",back_top:"fas fa-arrow-up",close:"fas fa-times",search:"fas fa-search",reward:"fas fa-hand-holding-usd",user_tag:"fas fa-user-alt",toc_tag:"fas fa-th-list",read:"fas fa-book-reader",arrows:"fas fa-arrows-alt-h",double_arrows:"fas fa-angle-double-down",copy:"fas fa-copy"},icontype:"font",highlight:{plugin:"highlighjs",theme:!0,copy:!0,lang:!1,title:"mac",height_limit:200},toc:{post_title:!1}}</script><script id="async-page-config">window.PAGE_CONFIG={isPost:!0,isHome:!1,postUpdate:"2023-10-09 00:36:43"}</script><link data-swup-theme rel="stylesheet" href="/xujianhu/css/index.css?v=2.1.2" id="trm-switch-style"><script>let defaultMode="auto"!==ASYNC_CONFIG.theme.default?ASYNC_CONFIG.theme.default:window.matchMedia("(prefers-color-scheme: light)").matches?"style-light":"style-dark",catchMode=localStorage.getItem("theme-mode")||defaultMode,type="style-dark"===catchMode?"add":"remove";document.documentElement.classList[type]("dark")</script><meta name="generator" content="Hexo 6.3.0"></head><body><div class="trm-app-frame"><div class="trm-preloader"><div class="trm-holder"><div class="preloader"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="trm-mode-swich-animation-frame"><div class="trm-mode-swich-animation"><i class="i-sun"><i class="iconfont far fa-sun"></i></i><div class="trm-horizon"></div><i class="i-moon"><i class="iconfont far fa-moon"></i></i></div></div><div id="trm-dynamic-content" class="trm-swup-animation"><div id="trm-scroll-container" class="trm-scroll-container" style="opacity:0"><header class="trm-top-bar"><div class="container"><div class="trm-left-side"><a href="/xujianhu/" class="trm-logo-frame trm-anima-link"><img alt="logo" src="/xujianhu/img/favicon.svg"><div class="trm-logo-text">不情<span>的歌</span></div></a></div><div class="trm-right-side"><div class="trm-menu"><nav><ul><li class="menu-item-has-children"><a href="/xujianhu/" target="">主页</a></li><li class="menu-item-has-children"><a href="/xujianhu/categories/" target="">分类</a></li><li class="menu-item-has-children"><a href="/xujianhu/archives/" target="">归档</a></li><li class="menu-item-has-children"><a data-no-swup href="/xujianhu/tag/" target="">标签</a></li></ul></nav></div><div class="trm-mode-switcher-place"><div class="trm-mode-switcher"><i class="iconfont far fa-sun"></i> <input class="tgl tgl-light" id="trm-swich" type="checkbox"> <label class="trm-swich" for="trm-swich"></label> <i class="iconfont far fa-moon"></i></div></div><form class="site-search-form"><input type="text" id="local-search-input" class="st-search-input" style="margin-bottom:0"></form><div id="local-search-result" class="local-search-result-cls"></div></div><div class="trm-menu-btn"><span></span></div></div></header><link rel="stylesheet" href="css/search.css"><script src="js/jquery.js"></script><script src="js/search.js"></script><script src="js/search_custom.js"></script><div class="trm-content-start"><div class="trm-banner"><img style="object-position:top;object-fit:cover" alt="banner" class="trm-banner-cover" src="/xujianhu/img/banner.png"><div class="trm-banner-content trm-overlay"><div class="container"><div class="row"><div class="col-lg-4"></div><div class="col-lg-8"><div class="trm-banner-text"><div class="trm-label trm-mb-20">NEWS LETTER</div><h1 class="trm-mb-30 trm-hsmb-font">webpack基本使用</h1><ul class="trm-breadcrumbs trm-label"><li><a href="/xujianhu/" class="trm-anima-link">Home</a></li><li><span>前端开发</span></li></ul></div><span id="scroll-triger" class="trm-scroll-hint-frame"><div class="trm-scroll-hint"></div><span class="trm-label">Scroll down</span></span></div></div></div></div></div><div class="container"><div class="row"><div class="trm-page-sidebar col-lg-4 hidden-sm"><div class="trm-main-card-frame trm-sidebar"><div class="trm-main-card"><div class="trm-mc-header"><div class="trm-avatar-frame trm-mb-20"><img alt="Avatar" class="trm-avatar" src="/xujianhu/images/logo/avatar.jpg"></div><h5 class="trm-name trm-mb-15">不情的歌</h5><div class="trm-label">I`m <span class="trm-typed-text"></span></div></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="trm-social"><a href="https://github.com" title="github" rel="nofollow" target="_blank"><i class="iconfont fab fa-github"></i> </a><a href="https://gitee.com" title="gitee" rel="nofollow" target="_blank"><i class="iconfont iconfont cg-gitee"></i></a></div><div class="trm-divider trm-mb-40 trm-mt-40"></div><ul class="trm-table trm-mb-20"><li><div class="trm-label">地址:</div><div class="trm-label trm-label-light">火星</div></li><li><div class="trm-label">年龄:</div><div class="trm-label trm-label-light">25</div></li></ul><div class="trm-divider trm-mb-40 trm-mt-40"></div><div class="text-center"><a href="mailto:951649211@qq.com" class="trm-btn">联系我 <i class="iconfont far fa-envelope"></i></a></div></div></div></div><div class="trm-page-content col-lg-8"><div id="trm-content" class="trm-content"><div class="trm-post-info row hidden-sm"><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-calendar-alt trm-icon"></i><br>07/01</div></div><div class="col-sm-4"><div class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-clock trm-icon"></i><br>20:41</div></div><div class="col-sm-4"><div id="post-author" class="trm-card trm-label trm-label-light text-center"><i class="iconfont far fa-user trm-icon"></i><br>buqingdege</div></div></div><div class="trm-card"><article id="article-container" class="trm-publication"><h1 id="基本安装使用"><a href="#基本安装使用" class="headerlink" title="基本安装使用"></a>基本安装使用</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i webpack webpack-cli -D</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npx webpack</span><br></pre></td></tr></table></figure><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508211323909.png" alt="image-20230508211323909" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>npx 命令会将nodemodules文件夹里的.bin 加入环境变量 以便可以使用webpack应用程序</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508211754613.png" alt="image-20230508211754613" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508211847946.png" alt="image-20230508211847946" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>打包成功了</p><h1 id="基本配置"><a href="#基本配置" class="headerlink" title="基本配置"></a>基本配置</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508213505235.png" alt="image-20230508213505235" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508213728401.png" alt="image-20230508213728401" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>配置文件一定在根目录 名字是固定的</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508213820648.png" alt="image-20230508213820648" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>五步写</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508214133131.png" alt="image-20230508214133131" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508214245023.png" alt="image-20230508214245023" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>entry一般都写相对路径 输出写绝对路径</p><h1 id="开发模式"><a href="#开发模式" class="headerlink" title="开发模式"></a>开发模式</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508215204747.png" alt="image-20230508215204747" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>一般是要先开发模式开发一套 在生产模式一套</p><h1 id="处理样式资源"><a href="#处理样式资源" class="headerlink" title="处理样式资源"></a>处理样式资源</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508215417459.png" alt="image-20230508215417459" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="处理css"><a href="#处理css" class="headerlink" title="处理css"></a>处理css</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508215641755.png" alt="image-20230508215641755" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508220240462.png" alt="image-20230508220240462" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508220434982.png" alt="image-20230508220434982" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>先css-loader引入成js模块 再用style-loader 将commenjs模块引入成style标签</p><h2 id="处理less"><a href="#处理less" class="headerlink" title="处理less"></a>处理less</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508222543008.png" alt="image-20230508222543008" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508222654606.png" alt="image-20230508222654606" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>特别注意 loader和use的区别 use可以使用多个loader loader只能一个</p><h2 id="处理sass"><a href="#处理sass" class="headerlink" title="处理sass"></a>处理sass</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508223203732.png" alt="image-20230508223203732" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508223307665.png" alt="image-20230508223307665" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="处理stylus资源"><a href="#处理stylus资源" class="headerlink" title="处理stylus资源"></a>处理stylus资源</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508223541828.png" alt="image-20230508223541828" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508223608595.png" alt="image-20230508223608595" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="处理图片资源"><a href="#处理图片资源" class="headerlink" title="处理图片资源"></a>处理图片资源</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508223856791.png" alt="image-20230508223856791" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>过去webpack4两种处理图片资源的方式 第一种fileloader形式是将图片原封不动的编译成webpack能识别的资源文件 而urlloader是将小于一定大小的图片转换成base64</p><p>webpack5已经内置 只需要激活</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508224100514.png" alt="image-20230508224100514" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>只需要那个type设置为asset就激活了两种loader</p><p>webpack5不做任何配置的情况下就会将图片原封不动的打包也就是webpack4的fileloader</p><p>而我们有需求 小于5kb的图片转换成base64</p><p>扩展：图片转换成base64会变大 但浏览器可以直接识别 减轻服务器压力</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508224618856.png" alt="image-20230508224618856" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h3 id="webpack5转换成base64配置"><a href="#webpack5转换成base64配置" class="headerlink" title="webpack5转换成base64配置"></a>webpack5转换成base64配置</h3><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508224707454.png" alt="image-20230508224707454" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508224831579.png" alt="image-20230508224831579" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h1 id="修改文件输出目录"><a href="#修改文件输出目录" class="headerlink" title="修改文件输出目录"></a>修改文件输出目录</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508233326545.png" alt="image-20230508233326545" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>前面提到的配置 path是全部输出文件的根目录 而filename是入口文件的输出目录</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508233514686.png" alt="image-20230508233514686" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508233649022.png" alt="image-20230508233649022" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>这里的filename 就是对应的文件的输出目录 [hash]是一个哈希值 自动生成唯一 ext就是原来的文件扩展名 query是一些查询参数 可写可不写</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508233900292.png" alt="image-20230508233900292" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>hash值可以加冒号控制它短一点</p><h1 id="自动清空原先的打包"><a href="#自动清空原先的打包" class="headerlink" title="自动清空原先的打包"></a>自动清空原先的打包</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508234113707.png" alt="image-20230508234113707" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>在webpack5中只需要输出加一句配置即可 webpack4中需要安装一个插件叫做webpackclearplugin</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508234226041.png" alt="image-20230508234226041" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h1 id="处理字体文件"><a href="#处理字体文件" class="headerlink" title="处理字体文件"></a>处理字体文件</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508235229124.png" alt="image-20230508235229124" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>asset&#x2F;resource文件相当于fileloader 原封不动的打包</p><h1 id="处理视频音频excel等其他所有文件"><a href="#处理视频音频excel等其他所有文件" class="headerlink" title="处理视频音频excel等其他所有文件"></a>处理视频音频excel等其他所有文件</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508235530313.png" alt="image-20230508235530313" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>都和字体文件类似</p><p>简单来说 webpack处理静态资源时 图片可以选择inline类型 直接写type:’asset’ parser…. 其他资源可以asset&#x2F;resource 类型</p><h1 id="处理js资源"><a href="#处理js资源" class="headerlink" title="处理js资源"></a>处理js资源</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230508235623662.png" alt="image-20230508235623662" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>兼容处理和eslint</p><h2 id="eslint"><a href="#eslint" class="headerlink" title="eslint"></a>eslint</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509103242883.png" alt="image-20230509103242883" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509103436060.png" alt="image-20230509103436060" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509103609171.png" alt="image-20230509103609171" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509103727735.png" alt="image-20230509103727735" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509104957285.png" alt="image-20230509104957285" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>官方规则不需要下载 rules自己写的规则优先级高于继承的规则</p><h3 id="webpack中eslint基础使用"><a href="#webpack中eslint基础使用" class="headerlink" title="webpack中eslint基础使用"></a>webpack中eslint基础使用</h3><p>是一个插件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509105347496.png" alt="image-20230509105347496" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509105606862.png" alt="image-20230509105606862" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>然后在项目根目录创建.eslintrc.js文件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509105759847.png" alt="image-20230509105759847" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509105859074.png" alt="image-20230509105859074" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'>安装vscode插件 编写代码的时候就会检查是否符合配置</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509105942087.png" alt="image-20230509105942087" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>但是 使用插件会发现我们webpack配置的是只检查src目录 但打开dist发现代码都标红了 这是因为插件检查不知道检查哪个目录</p><p>在根目录创建一个.eslintignore文件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509110229150.png" alt="image-20230509110229150" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509110256906.png" alt="image-20230509110256906" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="babel"><a href="#babel" class="headerlink" title="babel"></a>babel</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509112750125.png" alt="image-20230509112750125" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509112918782.png" alt="image-20230509112918782" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509113238791.png" alt="image-20230509113238791" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509113354006.png" alt="image-20230509113354006" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509113601200.png" alt="image-20230509113601200" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509113706628.png" alt="image-20230509113706628" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>创建babel配置文件 添加智能预设 智能预设就是解析es6</p><h1 id="处理html资源"><a href="#处理html资源" class="headerlink" title="处理html资源"></a>处理html资源</h1><p>我们还需要自己将资源手动引入html</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509115219415.png" alt="image-20230509115219415" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>安装一个插件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509115550437.png" alt="image-20230509115550437" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509115702791.png" alt="image-20230509115702791" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>引入插件后发现</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509115732527.png" alt="image-20230509115732527" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>index.html打包入了根目录 也自动引入js入口文件了 但是html的内容没了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509133311091.png" alt="image-20230509133311091" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>引入模板概念</p><h1 id="开发服务器搭建"><a href="#开发服务器搭建" class="headerlink" title="开发服务器搭建"></a>开发服务器搭建</h1><p>每一次修改代码都需要打包才能生效 很麻烦</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509134138765.png" alt="image-20230509134138765" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509134211733.png" alt="image-20230509134211733" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509134453499.png" alt="image-20230509134453499" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>只有npx webpack serve开启服务器 开发服务器不会输出资源 而是在内存中</p><p>运行后的网页有这样的提示 说入口文件太大了 警告</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509140203346.png" alt="image-20230509140203346" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>只需要webpack加配置</p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> performance: &#123;</span><br><span class="line">    hints: false,</span><br><span class="line">    maxEntrypointSize: 512000,</span><br><span class="line">    maxAssetSize: 512000</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><h1 id="生产模式"><a href="#生产模式" class="headerlink" title="生产模式"></a>生产模式</h1><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509142325794.png" alt="image-20230509142325794" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509142428285.png" alt="image-20230509142428285" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>可以分别使用两个配置文件配置生产和开发</p><p>修改的点1 相对路径不需要改 因为后期还是会到根目录运行</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509142559680.png" alt="image-20230509142559680" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509142653258.png" alt="image-20230509142653258" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>绝对路径就得回退一下</p><p>开发模式没有输出 path就可以是不定义</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509142731505.png" alt="image-20230509142731505" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>后面所有的相对路径都不需要改 因为相对于当前程序的运行路径 绝对路径都得改</p><p>指定运行的配置文件</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509142849242.png" alt="image-20230509142849242" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>可以将指令添加到package.json中， 不需要再npx 了 因为运行Npm指令也会默认将.bin 目录添加到环境变量</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509143142305.png" alt="image-20230509143142305" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509143304911.png" alt="image-20230509143304911" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>运行start直接 npm start就可以了 dev和build得npm run build npm run dev</p><h2 id="css处理-将css文件处理为单独的css文件"><a href="#css处理-将css文件处理为单独的css文件" class="headerlink" title="css处理 将css文件处理为单独的css文件"></a>css处理 将css文件处理为单独的css文件</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509145335362.png" alt="image-20230509145335362" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>闪屏现象：webpack将css通过css-loader先解析成js 再style-loader生成style标签 但 浏览器渲染网页 先渲染html结构 再去请求资源 再执行js 这就造成了闪屏 突然出现 如果网速慢 会更加明显</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509145446167.png" alt="image-20230509145446167" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509145739420.png" alt="image-20230509145739420" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509151948456.png" alt="image-20230509151948456" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509152033632.png" alt="image-20230509152033632" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509152139403.png" alt="image-20230509152139403" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>将style-loader改成用这个插件的loder 因为不需要将css文件变成style标签插入html了 肯定是link引入效率高 这一点是webpack5使用的，将所有less等预解析器的style-loader都可以换成这个</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509152307930.png" alt="image-20230509152307930" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>默认打包到根目录了 并将所有的css内容都集成到一个文件了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509152453335.png" alt="image-20230509152453335" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>配置打包css的位置</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509152549719.png" alt="image-20230509152549719" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>结合前面的html插件 自动引入了link css</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509152642603.png" alt="image-20230509152642603" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="css兼容性处理"><a href="#css兼容性处理" class="headerlink" title="css兼容性处理"></a>css兼容性处理</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509155300614.png" alt="image-20230509155300614" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509155354539.png" alt="image-20230509155354539" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>loader配置里 如果默认的loader不需要写loader的配置 那么直接字符串比如”css-loader”即可 但若需要options则写对象形式</p><p>然后在package.json中写 browserlist 兼容程度 来配置兼容程度</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509155839639.png" alt="image-20230509155839639" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>实际最多到ie8 以下代码 三行分表意思是 最近最新两个版本 99%的浏览器 没有弃用的版本 这三个取交集后的结果</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509160029446.png" alt="image-20230509160029446" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="css压缩"><a href="#css压缩" class="headerlink" title="css压缩"></a>css压缩</h2><p>webpack4使用optimize-css-assets-webpack-plugin 进行压缩 webpack5进行了优化</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509170144854.png" alt="image-20230509170144854" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>官方文档是在optimization中调用 而我们可以直接new就可以了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509170234436.png" alt="image-20230509170234436" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509170330951.png" alt="image-20230509170330951" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="html-js压缩"><a href="#html-js压缩" class="headerlink" title="html js压缩"></a>html js压缩</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509170912919.png" alt="image-20230509170912919" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509171007748.png" alt="image-20230509171007748" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h1 id="webpack优化（高级）"><a href="#webpack优化（高级）" class="headerlink" title="webpack优化（高级）"></a>webpack优化（高级）</h1><h2 id="sourcemap增强开发提示"><a href="#sourcemap增强开发提示" class="headerlink" title="sourcemap增强开发提示"></a>sourcemap增强开发提示</h2><p>不管是开发环境打包后还是生产环境打包后 生成的js文件都不能找到源代码出错的地方 于是就有了.map的映射文件 可以根据映射关系找到打包后代码和源代码的行列映射关系</p><p>cheap就是行的意思</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509212231832.webp" alt="image-20230509212231832" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509212555289.webp" alt="image-20230509212555289" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>生产环境会打包成一行如果不关心列那就看不到错误了</p><p>开发环境提示哪一行出错了</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509213120479.webp" alt="image-20230509213120479" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>比如生产模式提示哪一列</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509212856476.webp" alt="image-20230509212856476" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="提高代码打包速度-hotmodulerepalcement"><a href="#提高代码打包速度-hotmodulerepalcement" class="headerlink" title="提高代码打包速度 hotmodulerepalcement"></a>提高代码打包速度 hotmodulerepalcement</h2><p>只改了一个模块代码 但webpack却将所有模块重新打包 如果将没改的缓存起来 只替换改了的 就能大幅加速打包</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509213912731.webp" alt="image-20230509213912731" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>开启HMR 热模块更新 这是默认打开的 开发模式下style-loader默认实现了热模块更新 但js没有做到这点</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509214240901.webp" alt="image-20230509214240901" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>给js配置 先判断模块是否支持热更新 然后设置热更新</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509214737190.webp" alt="image-20230509214737190" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>但这样很麻烦 得一个一个写</p><p><img src="C:/Users/xujianhu/AppData/Roaming/Typora/typora-user-images/image-20230509214841655.png" alt="image-20230509214841655" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>热更新只有开发模式才能用 实际 vue react都提供了插件可以自动写这些热更新</p><h2 id="One-Of-一个文件只用一个loader"><a href="#One-Of-一个文件只用一个loader" class="headerlink" title="One Of 一个文件只用一个loader"></a>One Of 一个文件只用一个loader</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509215345654.webp" alt="image-20230509215345654" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509215513710.webp" alt="image-20230509215513710" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>假设有一个js文件 loader会逐个判断是否用加载器加载 即使js第一个就匹配了 也会一个一个的继续找下去 性能低下</p><p>解决办法就是把所有的loader都写到oneof中 每个文件只能用一个loader</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509215735599.webp" alt="image-20230509215735599" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="include-exclude-排除文件打包"><a href="#include-exclude-排除文件打包" class="headerlink" title="include&#x2F;exclude 排除文件打包"></a>include&#x2F;exclude 排除文件打包</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509220329432.webp" alt="image-20230509220329432" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>include 和exclude只能写一个 include指只处理某些文件 其他不处理 exlude 排除文件后其他的都处理</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509220502746.webp" alt="image-20230509220502746" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509220555286.webp" alt="image-20230509220555286" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>一般包含和排除只针对js做处理 一般是babel eslint 其他插件等和js文件有关系的文件 而比如css文件 一般排除和包含 因为css一般是我们自己写的 而引入bootstrap等包也希望他能和我们自己的样式打包在一起</p><h2 id="eslint-babel-缓存cache"><a href="#eslint-babel-缓存cache" class="headerlink" title="eslint babel 缓存cache"></a>eslint babel 缓存cache</h2><p>每次都检查和转义 会很慢 如果缓存上回的内容 再变动改动的 就能提升速度</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509221533482.webp" alt="image-20230509221533482" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>babel缓存</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509221819352.webp" alt="image-20230509221819352" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>eslint缓存</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509221900351.webp" alt="image-20230509221900351" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><h2 id="thread-开启多线程打包js"><a href="#thread-开启多线程打包js" class="headerlink" title="thread 开启多线程打包js"></a>thread 开启多线程打包js</h2><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509222521400.webp" alt="image-20230509222521400" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>terser是压缩插件 webpack提供的</p><p>开启多线程只在文件足够多的时候能够优化打包时间 因为开启进程需要时间 小文件没必要</p><p>怎么用</p><p>我们启动进程的数量就是我们 CPU 的核数。</p><ol><li>如何获取 CPU 的核数，因为每个电脑都不一样。</li></ol><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// nodejs核心模块，直接使用</span></span><br><span class="line"><span class="keyword">const</span> os = <span class="built_in">require</span>(<span class="string">&quot;os&quot;</span>);</span><br><span class="line"><span class="comment">// cpu核数</span></span><br><span class="line"><span class="keyword">const</span> threads = os.<span class="title function_">cpus</span>().<span class="property">length</span>;</span><br></pre></td></tr></table></figure><ol start="2"><li>下载包</li></ol><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i thread-loader -D</span><br></pre></td></tr></table></figure><ol start="3"><li><p>使用</p><p>babel中使用 必须在babel-loader上面或者说左面 也就是babel-loader开启后</p></li></ol><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509223106335.webp" alt="image-20230509223106335" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>eslint中使用</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509223128550.webp" alt="image-20230509223128550" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>terser中使用 先引入terser webpack 内置了 不需要下载</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509223346614.webp" alt="image-20230509223346614" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509223421472.webp" alt="image-20230509223421472" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p><p>我们目前打包的内容都很少，所以因为启动进程开销原因，使用多进程打包实际上会显著的让我们打包时间变得很长。</p><p>webpack推荐在optization中 放置压缩的东西</p><p><img src="https://raw.githubusercontent.com/e0528/tuchaung/main/image-20230509223557759.webp" alt="image-20230509223557759" loading="lazy" onerror='this.onerror=null,this.src="/xujianhu/img/404.jpg"'></p></article></div><div class="trm-post-next-prev row"><div class="col-lg-12"><h5 class="trm-title-with-divider">其他文章 <span data-number="02"></span></h5></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/%E6%80%8E%E6%A0%B7%E5%9C%A8webpack%E4%B8%AD%E4%BD%BF%E7%94%A8%20art-template%20%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%EF%BC%8C%20art-template%E8%AF%A6%E8%A7%A3/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/">前端开发</a></div><h5><a href="/xujianhu/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/%E6%80%8E%E6%A0%B7%E5%9C%A8webpack%E4%B8%AD%E4%BD%BF%E7%94%A8%20art-template%20%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%EF%BC%8C%20art-template%E8%AF%A6%E8%A7%A3/" class="trm-anima-link">怎样在webpack中使用 art-template 模板引擎， art-template详解</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/08/03</li><li>12:38</li></ul></div></div></div><div class="col-lg-6"><div class="trm-blog-card trm-scroll-animation"><a href="/xujianhu/node/pm2%E5%91%BD%E4%BB%A4/" class="trm-cover-frame trm-anima-link"><img alt="cover" class="no-fancybox" src="/xujianhu/img/block.jpg"></a><div class="trm-card-descr"><div class="trm-label trm-category trm-mb-20"><a href="/xujianhu/categories/node/">node</a></div><h5><a href="/xujianhu/node/pm2%E5%91%BD%E4%BB%A4/" class="trm-anima-link">Object方法</a></h5><div class="trm-divider trm-mb-20 trm-mt-20"></div><ul class="trm-card-data trm-label"><li>23/07/01</li><li>20:41</li></ul></div></div></div></div><div class="trm-divider footer-divider"></div><footer class="trm-scroll-animation"><div class="trm-footer-item"><span>© 2023- 2023</span> <span class="footer-separator" data-separator=" · "></span> <span class="trm-accent-color">不情的歌</span></div><div class="trm-footer-item">博客已萌萌哒运行 <span id="since" class="trm-accent-color"></span> 天</div><div class="trm-footer-item">当你累的时候你是在走上坡路</div></footer><script>function show_date_time(){var e=new Date("10/07/2023 15:00:00"),t=(new Date).getTime()-e.getTime(),i=Math.floor(t/864e5);since.innerHTML=i}show_date_time()</script></div></div></div></div></div><div id="post-toc" class="trm-post-toc"><div class="trm-post-toc-header">目录导航</div><div class="trm-post-toc-content"><ol class="trm-toc"><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#基本安装使用"><span class="trm-toc-number">1.</span> <span class="trm-toc-text">基本安装使用</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#基本配置"><span class="trm-toc-number">2.</span> <span class="trm-toc-text">基本配置</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#开发模式"><span class="trm-toc-number">3.</span> <span class="trm-toc-text">开发模式</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#处理样式资源"><span class="trm-toc-number">4.</span> <span class="trm-toc-text">处理样式资源</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#处理css"><span class="trm-toc-number">4.1.</span> <span class="trm-toc-text">处理css</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#处理less"><span class="trm-toc-number">4.2.</span> <span class="trm-toc-text">处理less</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#处理sass"><span class="trm-toc-number">4.3.</span> <span class="trm-toc-text">处理sass</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#处理stylus资源"><span class="trm-toc-number">4.4.</span> <span class="trm-toc-text">处理stylus资源</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#处理图片资源"><span class="trm-toc-number">4.5.</span> <span class="trm-toc-text">处理图片资源</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#webpack5转换成base64配置"><span class="trm-toc-number">4.5.1.</span> <span class="trm-toc-text">webpack5转换成base64配置</span></a></li></ol></li></ol></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#修改文件输出目录"><span class="trm-toc-number">5.</span> <span class="trm-toc-text">修改文件输出目录</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#自动清空原先的打包"><span class="trm-toc-number">6.</span> <span class="trm-toc-text">自动清空原先的打包</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#处理字体文件"><span class="trm-toc-number">7.</span> <span class="trm-toc-text">处理字体文件</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#处理视频音频excel等其他所有文件"><span class="trm-toc-number">8.</span> <span class="trm-toc-text">处理视频音频excel等其他所有文件</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#处理js资源"><span class="trm-toc-number">9.</span> <span class="trm-toc-text">处理js资源</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#eslint"><span class="trm-toc-number">9.1.</span> <span class="trm-toc-text">eslint</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-3"><a rel="nofollow" class="trm-toc-link" href="#webpack中eslint基础使用"><span class="trm-toc-number">9.1.1.</span> <span class="trm-toc-text">webpack中eslint基础使用</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#babel"><span class="trm-toc-number">9.2.</span> <span class="trm-toc-text">babel</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#处理html资源"><span class="trm-toc-number">10.</span> <span class="trm-toc-text">处理html资源</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#开发服务器搭建"><span class="trm-toc-number">11.</span> <span class="trm-toc-text">开发服务器搭建</span></a></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#生产模式"><span class="trm-toc-number">12.</span> <span class="trm-toc-text">生产模式</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#css处理-将css文件处理为单独的css文件"><span class="trm-toc-number">12.1.</span> <span class="trm-toc-text">css处理 将css文件处理为单独的css文件</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#css兼容性处理"><span class="trm-toc-number">12.2.</span> <span class="trm-toc-text">css兼容性处理</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#css压缩"><span class="trm-toc-number">12.3.</span> <span class="trm-toc-text">css压缩</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#html-js压缩"><span class="trm-toc-number">12.4.</span> <span class="trm-toc-text">html js压缩</span></a></li></ol></li><li class="trm-toc-item trm-toc-level-1"><a rel="nofollow" class="trm-toc-link" href="#webpack优化（高级）"><span class="trm-toc-number">13.</span> <span class="trm-toc-text">webpack优化（高级）</span></a><ol class="trm-toc-child"><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#sourcemap增强开发提示"><span class="trm-toc-number">13.1.</span> <span class="trm-toc-text">sourcemap增强开发提示</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#提高代码打包速度-hotmodulerepalcement"><span class="trm-toc-number">13.2.</span> <span class="trm-toc-text">提高代码打包速度 hotmodulerepalcement</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#One-Of-一个文件只用一个loader"><span class="trm-toc-number">13.3.</span> <span class="trm-toc-text">One Of 一个文件只用一个loader</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#include-exclude-排除文件打包"><span class="trm-toc-number">13.4.</span> <span class="trm-toc-text">include&#x2F;exclude 排除文件打包</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#eslint-babel-缓存cache"><span class="trm-toc-number">13.5.</span> <span class="trm-toc-text">eslint babel 缓存cache</span></a></li><li class="trm-toc-item trm-toc-level-2"><a rel="nofollow" class="trm-toc-link" href="#thread-开启多线程打包js"><span class="trm-toc-number">13.6.</span> <span class="trm-toc-text">thread 开启多线程打包js</span></a></li></ol></li></ol></div></div><div class="trm-fixed-container"><div class="trm-fixed-btn post-toc-btn" data-title="目录"><i class="iconfont fas fa-th-list"></i></div><div class="trm-fixed-btn" data-title="阅读模式" onclick="asyncFun.switchReadMode()"><i class="iconfont fas fa-book-reader"></i></div><div class="trm-fixed-btn hidden-md" data-title="单栏和双栏切换" onclick="asyncFun.switchSingleColumn()"><i class="iconfont fas fa-arrows-alt-h"></i></div><div id="trm-back-top" class="trm-fixed-btn" data-title="回到顶部"><i class="iconfont fas fa-arrow-up"></i></div></div></div></div></div><script src="https://unpkg.com/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script><script src="/xujianhu/js/plugins/typing.js?v=2.1.2"></script><script id="async-script" src="/xujianhu/js/main.js?v=2.1.2"></script><script src="/xujianhu/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"log":false,"pluginJsPath":"lib/","pluginModelPath":"assets/","pluginRootPath":"live2dw/","tagMode":false});</script></body></html>